<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-21 15:17
 * Desc: CouponBox 电影券空壳
 */
-->
<template>
  <view class="coupon-box">
    <view class="coupon-box__left">
      <slot name="left"></slot>
    </view>
    <!-- <view class="coupon-box__middle">
      <view class="coupon-box__middle--circle-top"></view>
      <view class="coupon-box__middle--dashed"></view>
      <view class="coupon-box__middle--circle-bottom"></view>
    </view> -->
    <view class="coupon-box__right">
      <slot name="right"></slot>
    </view>
    <!-- #ifdef MP-TOUTIAO -->
    <view v-if="!canUse" class="coupon-box-no"></view>
    <!-- #endif -->
  </view>
</template>
<script>
  export default {
    name: 'CouponBox',
    data() {
      return {}
    },
    props: {
      canUse: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      getStyle() {
        if (this.canUse) {
          return ''
        } else {
          return "{ backgroundColor: '#919191' }"
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .coupon-box-no {
    background: #919191;
    border-radius: 20upx;
    margin-bottom: 20upx;
    width: 710upx;
    opacity: 0.5;
    min-height: 180rpx;
    position: absolute;
  }
  .coupon-box {
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    width: 710upx;
    background: #f3f5f7;
    border-radius: 20upx;
    margin-bottom: 20upx;
    min-height: 180rpx;
    &__left {
      flex: 3;
      // #ifdef MP-TOUTIAO
      display: flex;
      align-items: center;
      // #endif
      background: radial-gradient(
            circle at right top,
            transparent 16rpx,
            #ffffff 0
          )
          right top / 100% 51% no-repeat,
        radial-gradient(circle at right bottom, transparent 16rpx, #ffffff 0)
          right bottom / 100% 50% no-repeat;
      position: relative;
    }
    &__right {
      flex: 1;
      background: radial-gradient(
            circle at left top,
            transparent 16rpx,
            #ffffff 0
          )
          right top / 100% 50% no-repeat,
        radial-gradient(circle at left bottom, transparent 16rpx, #ffffff 0)
          right bottom / 100% 50% no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    &__right::before {
      content: '';
      width: 1rpx;
      background: linear-gradient(
          to top,
          #f3f5f7 0%,
          #f3f5f7 50%,
          transparent 50%
        )
        top left / 1rpx 20rpx repeat-y;
      position: absolute;
      left: 0;
      top: 16rpx;
      bottom: 16rpx;
    }
    &__middle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      width: 20upx;
    }
    &__middle--dashed {
      width: 2upx;
      height: 142upx;
      border: 2upx dashed #f3f5f7;
    }
    &__middle--circle-top {
      width: 20upx;
      height: 10upx;
      border-radius: 0 0 50% 50%;
      background: #f3f5f7;
    }
    &__middle--circle-bottom {
      width: 20upx;
      height: 10upx;
      border-radius: 50% 50% 0 0;
      background: #f3f5f7;
    }
  }
</style>
